<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>报表生成</title>

  <link rel="stylesheet" type="text/css" href="easyui/themes/material/easyui.css">
  <link rel="stylesheet" type="text/css" href="easyui/themes/color.css">
  <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
  <script type="text/javascript" src="easyui/jquery.min.js"></script>
  <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
  <script src="./web/JS/html2canvas.js"></script>
  <script src="./web/JS/jspdf.debug.js"></script>
  <script type="text/javascript" src="web/amcharts/amcharts.js"></script>
  <script type="text/javascript" src="web/echart/dist4.7/echarts.js"></script>
  <script type="text/javascript" src="web/echart/dist4.7/echarts.min.js"></script>

  <script src="web/JS/URLRooter.js"></script>
  <script src="web/JS/common.js"></script>
  <script src="report_generation.js"></script>

  <style>
    .el-wrapper::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 4px;
      /*宽度竖滚动条的尺寸*/
      height: 4px;
      /*高度横滚动条的尺寸*/
    }

    .el-wrapper::-webkit-scrollbar-thumb {
      /*滚动条里面的条*/
      border-radius: 4px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #0DB0EC;
    }

    .el-wrapper::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      border-radius: 4px;
      background: #ffffff;
    }

    .textcontent {
      text-indent: 2em;
      line-height: 30px;
    }

    .littletitle {
      line-height: 50px;
      font-size: 18px;
      font-weight: 600;
    }

    .chartdiv {
      width: 50%;
      height: 200px;
    }

    .banxin {
      margin: 0 auto;
      width: 80%;
    }

    table {
      border-spacing: 0;
      /*把单元格间隙设置为0*/
      border-collapse: collapse;
    }

    td,
    th {
      border: 1px solid #ccc;

    }

    #btn {
      margin-left: 10%;
      margin-top: 20px;
    }
  </style>
</head>

<body class="easyui-layout el-wrapper" class="main" style="overflow: auto;">
  <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:''">报表生成</a>
  <div id="pdfDom">
    <div class="banxin" id="contentbox">
      <h1 style="text-align: center;height:60px;line-height:60px;">闪蒸气压缩机组数据挖掘服务报表</h1>
      <h3>1、报表时间：
        <input id="db_Start" type="text" class="easyui-datebox" style="width:200px;"
          data-options="labelWidth:100,labelAlign:'right'"> </input>至
        <input id="db_End" type="text" class="easyui-datebox" style="width:200px;"
          data-options="labelWidth:30,labelAlign:'right'"> </input>
        <a href="#" class="easyui-linkbutton" onclick="InitData()" data-options="iconCls:'icon-search'">查询</a>
      </h3>
      <h3>2、报表内容：闪蒸气压缩机组状态信息</h3>
      <h3>3、机组状态数据：</h3>
      <div class="textcontent">搜索时间段内一级压缩系统日最大温差为<span id="maxTempDifference1"></span>℃，日最大压差为<span
          id="maxPressureDifference1"></span>Kpag；二级压缩系统日最大温差为<span id="maxTempDifference2"></span>℃，日最大压差为<span
          id="maxPressureDifference2"></span>Kpag；三级第一压缩系统日最大温差为<span id="maxTempDifference3"></span>℃,日最大压差为<span
          id="maxPressureDifference3"></span>Kpag；三级第二压缩系统日最大温差为<span id="maxTempDifference4"></span>℃,日最大压差为<span
          id="maxPressureDifference4"></span>Kpag。
      </div>
      <div class="textcontent">
        该时间段内各级压缩系统内各点位传感器数据反应如下所示：
      </div>
      <!-- 第一压缩机 -->
      <div class="textcontent littletitle">
        （1） 一级压缩机系统内压缩机以及洗涤器、后冷却器的传感器监测数据反应如下图所示：
      </div>
      <div>
        <div style="width:  100%;padding: 0px;">
          <div id="chartdiv1" class="chartdiv" style="float: left;"></div>
          <div id="chartdiv2" class="chartdiv" style="float: left;"></div>
        </div>
        <div style="display: flex;clear: both;width: 100%;">
          <div style="width: 50%;text-align: center;">一级压缩机入口温度</div>
          <div style="width: 50%;text-align: center;">一级压缩机A出口压力</div>
        </div>
        <div style="width:  100%;padding: 0px;">
          <div id="chartdiv3" class="chartdiv" style="float: left;"></div>
          <div id="chartdiv4" class="chartdiv" style="float: left;"></div>
        </div>
        <div style="display: flex;clear: both;width: 100%;">
          <div style="width: 50%;text-align: center;">一级压缩机A出口温度</div>
          <div style="width: 50%;text-align: center;">一级压缩机B出口压力</div>
        </div>
        <div style="width:  100%;padding: 0px;">
          <div id="chartdiv5" class="chartdiv" style="float: left;"></div>
          <div id="chartdiv6" class="chartdiv" style="float: left;"></div>
        </div>
        <div style="display: flex;clear: both;width: 100%;">
          <div style="width: 50%;text-align: center;">一级压缩机B出口温度</div>
          <div style="width: 50%;text-align: center;">一级洗涤器压力</div>
        </div>
        <div style="width:  100%;padding: 0px;">
          <div id="chartdiv7" class="chartdiv" style="float: left;"></div>
          <div id="chartdiv8" class="chartdiv" style="float: left;"></div>
        </div>
        <div style="display: flex;clear: both;width: 100%;">
          <div style="width: 50%;text-align: center;">一级洗涤器液位</div>
          <div style="width: 50%;text-align: center;">一级后冷却器出口温度</div>
        </div>
      </div>
      <!-- 二级压缩机 -->
      <div class="textcontent littletitle">
        （2） 二级压缩机系统内压缩机以及洗涤器、后冷却器的传感器监测数据反应如下图所示：
      </div>
      <div>
        <div style="width:  100%;padding: 0px;">
          <div id="chartdiv9" class="chartdiv" style="float: left;"></div>
          <div id="chartdiv10" class="chartdiv" style="float: left;"></div>
        </div>
        <div style="display: flex;clear: both;width: 100%;">
          <div style="width: 50%;text-align: center;">二级压缩机入口温度</div>
          <div style="width: 50%;text-align: center;">二级压缩机A出口压力</div>
        </div>
        <div style="width:  100%;padding: 0px;">
          <div id="chartdiv11" class="chartdiv" style="float: left;"></div>
          <div id="chartdiv12" class="chartdiv" style="float: left;"></div>
        </div>
        <div style="display: flex;clear: both;width: 100%;">
          <div style="width: 50%;text-align: center;">二级压缩机A出口温度</div>
          <div style="width: 50%;text-align: center;">二级压缩机B出口压力</div>
        </div>
        <div style="width:  100%;padding: 0px;">
          <div id="chartdiv13" class="chartdiv" style="float: left;"></div>
          <div id="chartdiv14" class="chartdiv" style="float: left;"></div>
        </div>
        <div style="display: flex;clear: both;width: 100%;">
          <div style="width: 50%;text-align: center;">二级压缩机B出口温度</div>
          <div style="width: 50%;text-align: center;">二级洗涤器压力</div>
        </div>
        <div style="width:  100%;padding: 0px;">
          <div id="chartdiv15" class="chartdiv" style="float: left;"></div>
          <div id="chartdiv16" class="chartdiv" style="float: left;"></div>
        </div>
        <div style="display: flex;clear: both;width: 100%;">
          <div style="width: 50%;text-align: center;">二级洗涤器液位</div>
          <div style="width: 50%;text-align: center;">二级后冷却器出口温度</div>
        </div>
      </div>
      <!-- 三级第一压缩机 -->
      <div class="textcontent littletitle">
        （3）三级压缩机系统内压缩机以及洗涤器、后冷却器的传感器监测数据反应如下图所示：
      </div>
      <div>
        <div style="width:  100%;padding: 0px;">
          <div id="chartdiv17" class="chartdiv" style="float: left;"></div>
          <div id="chartdiv18" class="chartdiv" style="float: left;"></div>
        </div>
        <div style="display: flex;clear: both;width: 100%;">
          <div style="width: 50%;text-align: center;">三级第一压缩机入口温度</div>
          <div style="width: 50%;text-align: center;">三级第一压缩机A出口压力</div>
        </div>
        <div style="width:  100%;padding: 0px;">
          <div id="chartdiv19" class="chartdiv" style="float: left;"></div>
          <div id="chartdiv20" class="chartdiv" style="float: left;"></div>
        </div>
        <div style="display: flex;clear: both;width: 100%;">
          <div style="width: 50%;text-align: center;">三级第一压缩机A出口温度</div>
          <div style="width: 50%;text-align: center;">三级第一压缩机B出口压力</div>
        </div>
        <div style="width:  100%;padding: 0px;">
          <div id="chartdiv21" class="chartdiv" style="float: left;"></div>
          <div id="chartdiv22" class="chartdiv" style="float: left;"></div>
        </div>
        <div style="display: flex;clear: both;width: 100%;">
          <div style="width: 50%;text-align: center;">三级第一压缩机B出口温度</div>
          <div style="width: 50%;text-align: center;">三级第一洗涤器压力</div>
        </div>
        <div style="width:  100%;padding: 0px;">
          <div id="chartdiv23" class="chartdiv" style="float: left;"></div>
        </div>
        <div style="display: flex;clear: both;width: 100%;">
          <div style="width: 50%;text-align: center;">三级第一洗涤器液位</div>
        </div>
      </div>
      <!-- 三级第二压缩机 -->
      <div>
        <div style="width:  100%;padding: 0px;">
          <div id="chartdiv24" class="chartdiv" style="float: left;"></div>
          <div id="chartdiv25" class="chartdiv" style="float: left;"></div>
        </div>
        <div style="display: flex;clear: both;width: 100%;">
          <div style="width: 50%;text-align: center;">三级第二压缩机入口温度</div>
          <div style="width: 50%;text-align: center;">三级第二压缩机A出口压力</div>
        </div>
        <div style="width:  100%;padding: 0px;">
          <div id="chartdiv26" class="chartdiv" style="float: left;"></div>
          <div id="chartdiv27" class="chartdiv" style="float: left;"></div>
        </div>
        <div style="display: flex;clear: both;width: 100%;">
          <div style="width: 50%;text-align: center;">三级第二压缩机A出口温度</div>
          <div style="width: 50%;text-align: center;">三级第二压缩机B出口压力</div>
        </div>
        <div style="width:  100%;padding: 0px;">
          <div id="chartdiv28" class="chartdiv" style="float: left;"></div>
          <div id="chartdiv29" class="chartdiv" style="float: left;"></div>
        </div>
        <div style="display: flex;clear: both;width: 100%;">
          <div style="width: 50%;text-align: center;">三级第二压缩机B出口温度</div>
          <div style="width: 50%;text-align: center;">三级第二洗涤器压力</div>
        </div>
        <div style="width:  100%;padding: 0px;">
          <div id="chartdiv30" class="chartdiv" style="float: left;"></div>
        </div>
        <div style="display: flex;clear: both;width: 100%;">
          <div style="width: 50%;text-align: center;">三级第二洗涤器液位</div>
        </div>
      </div>
      <h3>4、机组状态数据：</h3>
      <h3 style="text-indent: 2em;" id="noproblem">无故障；</h3>
      <div id="haveproblem">
        <div class="textcontent">
          根据机组中各点位数据情况以及传感器报警监测结果，
          可得出该时间段内闪蒸气压缩机组各点位传感器共产生超出阈值报警<span id="numproblem"></span>次，
          故障报警<span id="equiproblem"></span>次。
          详细信息如下表所示：
        </div>
        <div style="text-align:center;font-size:16px;line-height:40px;height:40px;">阈值报警信息表</div>
        <div style="width: 100%;margin:0 auto;">
          <table id="dg_DateList1"
            data-options="singleSelect:true,toolbar:'#tb01',border:false,rownumbers:true,fitColumns:true,nowrap:false">
            <thead>
              <tr>
                <th data-options="field:'almtime',width:200,align:'center'">时间</th>
                <th data-options="field:'custom0',width:200,align:'center'">报警位置</th>
                <th data-options="field:'custom1',width:200,align:'center'">报警类型</th>
                <th data-options="field:'almdesc',width:400,align:'center'">备注</th>
              </tr>
            </thead>
          </table>
        </div>
        <div style="text-align:center;font-size:16px;line-height:40px;height:40px;">故障报警信息表</div>
        <div style="width: 100%;margin:0 auto;">
          <table id="dg_DateList2"
            data-options="singleSelect:true,toolbar:'#tb01',border:false,rownumbers:true,fitColumns:true,nowrap:false">
            <thead>
              <tr>
                <th data-options="field:'almtime',width:200,align:'center'">时间</th>
                <th data-options="field:'custom0',width:200,align:'center'">故障位置</th>
                <th data-options="field:'custom1',width:200,align:'center'">故障类型</th>
                <th data-options="field:'almdesc',width:400,align:'center'">备注</th>
              </tr>
            </thead>
          </table>
        </div>
        <div style="height: 50px;line-height:50px;font-size:16px;font-weight:600;">故障1分析：</div>
        <div id="problem1fenxi">

        </div>
        <div style="height: 50px;line-height:50px;font-size:16px;font-weight:600;">故障2分析：</div>
        <div id="problem2fenxi">

        </div>

      </div>
    </div>
  </div>
</body>

</html>
<script>
  let obox = document.getElementById("box")
  let opdfdom = $("#pdfDom")
  let obtn = document.getElementById("btn")

  obtn.onclick = function () {
    downLoadPdf(opdfdom)
  }
  function downLoadPdf(content) {
    content = content ? content : null;
    // 条件判断是否打印
    if (!content) {
      alert("打印失败，请重新操作")
      return false
    }
    // 开始打印
    console.log(content)
    var contentWidth = content.width();
    var contentHeight = content.height();
    var canvas = document.createElement("canvas")
    canvas.width = contentWidth
    canvas.height = contentHeight
    var context = canvas.getContext("2d");
    html2canvas(content, {
      allowTaint: true,
      scale: 2  // 提升画面质量，但是会增加文件大小
    }).then(function (canvas) {
      var pdfWidth = canvas.width;
      var pdfHeight = canvas.height;
      var pageHeight = pdfWidth / 592.28 * 841.89;
      var leftHeight = pdfHeight;
      var position = 0;
      var imgWidth = 595.28;
      var imgHeight = 595.28 / pdfWidth * pdfHeight;
      var pageData = canvas.toDataURL("img/jpeg", 1.0);
      var pdf = new jsPDF('', 'pt', 'a4');
      // 判断打印dom高度是否需要分页，如果需要进行分页处理
      if (leftHeight < pageHeight) {
        pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight)
      } else {
        while (leftHeight > 0) {
          pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight)
          leftHeight -= pageHeight
          position -= 841.89
          if (leftHeight > 0) {
            pdf.addPage()
          }
        }
      }
      pdf.save("报表.pdf")
    })

  }
</script>